import React from 'react';
import { connect } from 'dva';
import createG2 from 'g2-react';
import { Button, Table, Form,Row,Col, Input, Popconfirm, Select, DatePicker ,Tabs} from 'antd';
const { RangePicker } = DatePicker;
import StatusModal from '../../components/ledger/StatusModal';
const FormItem = Form.Item;
import { baseUrl } from '../../config/system';
const TabPane = Tabs.TabPane
function AssetStatus({ dispatch, assetStatus, loading, form }) {

const roomOptions = assetStatus.roomList?assetStatus.roomList.map(d => <Option key={d.id}>{d.name}</Option>):[];
  const formItemLayout = {
    wrapperCol: { className: 'wrapper-col' },
  };
  function callback(key) {

    var formData=form.getFieldsValue();
    var objectData={};
    objectData.roomIds=formData.roomIds;
    if(formData.dates!=null&&formData.dates.length>0){
      objectData.startDate=formData.dates[0];
      objectData.endDate=formData.dates[1];
    }
    dispatch({
      type: 'assetStatus/queryStatusList',
      payload:{...objectData},
    });
  }
  const Pie = createG2(chart => {
    chart.col('label', {
           alias: '设备状态'
         });
    chart.axis('value', {
      line: {
        lineWidth: 1, // 设置线的宽度
        stroke: '#000' //  设置线的颜色
      }, // 设置坐标轴线的样式，如果值为 null，则不显示坐标轴线 图形属性
      formatter: function(val) {
            return (val / 1 )+"";
          },
      labels: {
        label: {
          textAlign: 'center', // 文本对齐方向，可取值为： left center right
          fill: '#000', //文本的颜色
          fontSize: '12', // 文本大小
          rotate: 0 // 旋转角度
        }, // 设置坐标轴文本的显示样式，如果值为 null，则不显示坐标轴文本 文本属性
        autoRotate: true // 是否需要自动旋转
      },
      title: '类型台账', // 坐标轴标题设置，如果值为 null，则不显示标题 文本属性
      tickLine: {
        lineWidth: 1,
        stroke: '#000',
        value: 5,
      }, // 坐标点对应的线，null 不显示 图形属性
      labelOffset: 16, // 标轴文本距离轴线的距离
      grid: null, // 坐标轴栅格线的配置信息，默认只有左边的坐标轴带有栅格线，null 为不显示。
      gridAlign: 'middle',
    });
    chart.axis('label', {
      line: {
        lineWidth: 1, // 设置线的宽度
        stroke: '#000' //  设置线的颜色
      }, // 设置坐标轴线的样式，如果值为 null，则不显示坐标轴线 图形属性
      labels: {
        label: {
          textAlign: 'center', // 文本对齐方向，可取值为： left center right
          fill: '#000', //文本的颜色
          fontSize: '12', // 文本大小
          rotate: 0 // 旋转角度
        }, // 设置坐标轴文本的显示样式，如果值为 null，则不显示坐标轴文本 文本属性
        autoRotate: true // 是否需要自动旋转
      },
      labelOffset: 16, // 标轴文本距离轴线的距离
      tickLine: null, // 坐标点对应的线，null 不显示 图形属性
      title: null, // 坐标轴标题设置，如果值为 null，则不显示标题 文本属性
    });
    chart.interval().position('label*value')
      .color('label',['#2cb7f5'])
      .label('value',{
        label: {
          fill: '#fff', //文本的颜色
          fontSize: '12', // 文本大小
        },
      })
    chart.render();
  });
  let plotCfg = {
    margin: [20, 180,80,80]
  };

    const handleGetOutEdit = () => {
      let param = JSON.stringify({ ...getFieldsValue() });
      param = encodeURIComponent(param);
      window.open(baseUrl+"/dataExcel/exportAssetStatus.jhtml?param="+param);
    }

    const modalDetailProps = {
      visible: assetStatus.modalVisible,
      maskClosable: false,
      dispatch: dispatch,
      detailList:assetStatus.detailList,
      pageNum:assetStatus.pageNum,
      pageSize:assetStatus.pageSize,
      total:assetStatus.total,
      roomId:assetStatus.roomId,
      brandId:assetStatus.brandId,
      title:'品牌明细',
      wrapClassName: 'vertical-center-modal',
      onCancel () {
        dispatch({
            type: 'assetStatus/hideModal',
        })
      },
    }
  const { getFieldDecorator, getFieldsValue, getFieldValue } = form;
    return (
      <div style={{backgroundColor:'#fff'}}>
        <div style={{minHeight:'100%'}}>
        <div style={{width:'100%',backgroundColor:'#fff',lineHeight:'50px',paddingLeft:'20px',paddingTop:'10px', paddingRight:'20px'}}>
        <Form layout="inline" style={{width:'100%'}}>
        <Row gutter={16}>
            <Col span={6}>
              <FormItem style={{ width: '100%' }} {...formItemLayout}>
              {getFieldDecorator('roomIds')(
                <Select
                  showSearch
                  mode="multiple"
                  style={{ width: '100%' }}
                  placeholder="选择机房"
                  optionFilterProp="children"
                >
                {roomOptions}
              </Select>
              )}
              </FormItem>
            </Col>
            <Col span={6}>
              <FormItem style={{ width: '100%' }} {...formItemLayout}>
              {getFieldDecorator('dates')(
                  <RangePicker style={{ width: '100%' }} format="YYYY-MM-DD" />
              )}
              </FormItem>
            </Col>
            <Col span={5}></Col>
            <Col span={2}></Col>
            <Col span={5} style={{textAlign: 'right'}}>          
              <FormItem>
                <Button type="primary" size='large' onClick={callback.bind(this,0)}  icon="search">查询</Button>
              </FormItem>             
              <FormItem>
                <Button size="large" onClick={handleGetOutEdit} icon="download" >导出</Button>
              </FormItem>   
            </Col>
        </Row>
        </Form>
        </div>
        <div style={{width:'100%',height:'100%',paddingLeft:'20px',paddingTop:'20px',paddingRight:'20px'}}>
        <Row>
          <Col span={24}>
        <Tabs onChange={callback}  type="card">
             <TabPane tab={'列表'} key="table">
               <Table
                 columns={assetStatus.statusColumnsList}
                 dataSource={assetStatus.statusList}
                 pagination={false}
                 rowKey={record => record.id}
                 loading={assetStatus.statusLoading}
                 scroll={{ x:assetStatus.statusWidth,}}
               />
             </TabPane>
             <TabPane tab={'图表'}  key="echart">
              <Pie key={new Date().valueOf()} data={assetStatus.chartData} height={600} plotCfg={plotCfg} forceFit={true}/>
             </TabPane>
           </Tabs>
           </Col>
           </Row>
        </div>
        <StatusModal {...modalDetailProps} />
      </div>
   </div>
  );
}

function mapStateToProps(state) {
  return { assetStatus : state.assetStatus};
}

AssetStatus = Form.create()(AssetStatus);

export default connect(mapStateToProps)(AssetStatus);
